import QtQuick 2.0
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3
import "NaviControl"


Page{
    id:root
    title: "NaviControl"


    ColumnLayout{
        anchors.fill: parent

        GridView{
            id:grid
            Layout.fillWidth: true
            Layout.preferredHeight: 300
            model: Model{}
            //flow:Flow.TopToBottom
            delegate: gridCom
            cellHeight : 100
            cellWidth : 100
            highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
        }
        ScrollView {
            id: view
            ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
            Layout.fillWidth: true
            Layout.fillHeight: true
            TextArea{
                id:area
                anchors.fill: parent
                readOnly: true
                wrapMode: Text.WordWrap
                //focusReason:
            }
        }

    }


    Component{
        id:gridCom
        Item{
            width: grid.cellWidth; height: grid.cellHeight
            Button{
                width: 50; height: 50
                anchors.centerIn: parent
                text:index
                onClicked: {
                    grid.currentIndex = index
                    var str = "您点击了"+index.toString()
                    area.append(str)
                }
            }
        }

    }

}
